<template>
	<el-dialog v-model="state.dialogUploadVisible" :lock-scroll="false" draggable width="400px">
		<template #header>
			<div style="color: #fff">
				<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle">
					<ele-UploadFilled /> </el-icon>
				<span> {{ $t('message.pageConfiguration.uploadFile') }} </span>
			</div>
		</template>
		<div>
			<el-upload ref="uploadRef" drag :auto-upload="false" :limit="1" :file-list="state.fileList" action=""
				:on-change="handleChange" accept=".jpg,.png,.bmp,.gif,.txt,.pdf,.xlsx,.docx">
				<el-icon class="el-icon--upload">
					<ele-UploadFilled />
				</el-icon>
				<div class="el-upload__text">
					{{ $t('message.pageConfiguration.operateTip') }}<em>{{ $t('message.pageConfiguration.tips') }}</em>
				</div>
				<template #tip>
					<div class="el-upload__tip">{{ $t('message.pageConfiguration.importTip') }}</div>
				</template>
			</el-upload>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.dialogUploadVisible = false">{{ $t('message.pageConfiguration.cancel')
					}}</el-button>
				<el-button type="primary" @click="uploadFile">{{ $t('message.pageConfiguration.confirm') }}</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="uploaddialog">
import { reactive, ref, onMounted, watch } from 'vue';
import { ElMessageBox, ElMessage, UploadInstance } from 'element-plus';
import type { FormInstance } from 'element-plus';
import { getAPI } from '/@/utils/axios-utils';
import { SysFileApi } from '/@/api-services/api';
import { SysFile } from '/@/api-services/models';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
// 定义父组件传过来的值
const props = defineProps({
	importData: {
		type: Function,
		required: true,
	},
	isSavefile:
	{
		type: Boolean,
		default: true,
	}
});

// 定义子组件向父组件传值/事件
// const emit = defineEmits(['importData']);

// 定义变量内容
const tableSearchRef = ref<FormInstance>();
const state = reactive({
	loading: false,
	fileData: [] as Array<SysFile>,
	queryParams: {
		fileName: undefined,
		startTime: undefined,
		endTime: undefined,
	},
	tableParams: {
		page: 1,
		pageSize: 10,
		total: 0 as any,
	},


	dialogUploadVisible: false,
	diaglogEditFile: false,
	fileList: [] as any,
	dialogDocxVisible: false,
	dialogXlsxVisible: false,
	dialogPdfVisible: false,
	showViewer: false,
	docxUrl: '',
	excelUrl: '',
	pdfUrl: '',
	fileName: '',
	previewList: [] as string[],
});
// 打开上传页面
const openUploadDialog = () => {
	state.fileList = [];
	state.dialogUploadVisible = true;

};
// 通过onChanne方法获得文件列表
const handleChange = (file: any, fileList: []) => {
	state.fileList = fileList;
};
// 上传
const uploadFile = async () => {
	if (state.fileList.length < 1) return;
	if (props.isSavefile)
		await getAPI(SysFileApi).apiSysFileUploadFilePostForm(state.fileList[0].raw);
	//var filepath= res.data.result?.filePath; 
	var res = await props.importData(state.fileList[0].raw);
	//console.log('filepath', res.data.result)

	state.dialogUploadVisible = false;
};
onMounted(() => {
	// initFormField(); 
});
// 暴露变量
defineExpose({
	openUploadDialog
});
</script>

<style scoped lang="scss">
.table-search-container {
	display: flex;

	.table-form {
		flex: 1;

		.table-form-btn-toggle {
			white-space: nowrap;
			user-select: none;
			display: flex;
			align-items: center;
			color: var(--el-color-primary);
		}
	}
}
</style>
